<template>
  <div>
    <div class="contents" v-if="commentCount !== 0" v-for="(v,i) in commentList" :key="i">
      <div style="width: 100vw;height: 10.67vw;line-height:6.67vw;border-bottom: 1px solid #f5f5f5">
        <div style="width: 92vw;height: 100%;margin: 0px auto;">
          <p style="color: #333;font-size: 13px;">订单号：{{v.order_no}}
            <span style="float: right;font-size: 12px;color: #ff4c50;">{{v.status}}</span>
          </p>
        </div>
      </div>
      <div class="sec">
        <!--<router-link :to="'/detail?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+v1.goods_id">&lt;!&ndash;商品详情&ndash;&gt;-->
        <a :href="'/pages/orderDetail/main?orderNum='+v.order_no">
          <img :src="v.img" alt="">
          <div class="text">
            <p class="name">
              <span class="goodsName">{{v.goods_name}}</span>
              <span class="types">￥{{v.real_price}}</span>
            </p>
            <p class="size" style="magrin-top:1vw;">
              <span>规格:{{v.spec_array}}</span>
              <span class="types" style="margin-right: -13vw">×{{v.goods_nums}}</span>
            </p>
            <div class="seven" v-if="v.is_seven_return == 0">七天无理由退换货</div>
          </div>
        </a>
      </div>
     <!-- <div style="width: 100vw;height: 9.33vw;">
        <div class="btn">
          <button class="pay" v-if="v.is_comment == 1" @click="gotoApp">评论</button>
       &lt;!&ndash;   <button class="pay" v-if="v.is_return == 1" @click="gotoApp">申请售后</button>&ndash;&gt;
        </div>
      </div>-->
    </div>
    <div class="ifBlank" v-if="commentCount === 0">

      <div>
        <img src="/static/img/space_orders.png" alt="">
        <p>您还没有订单哦！</p>
      </div>
    </div>
  </div>
</template>

<script>
  /*import { Dialog } from 'vant'*/
  export default {
    name: "orderList",
     props:["commentList","commentCount"],
    inject:["reload"],
    data(){
      return{
        cancel:1,
        deletes:2,
      }
    },
    methods:{
      gotoApp(){
        wx.showModal({
          content: '是否前往app操作',
          success: function(res) {
            if (res.confirm) {
              console.log('确定')
            } else if (res.cancel) {
              console.log('取消')
            }
          }
      })
      }
    },
    mounted () {
    }
  }
</script>

<style scoped lang="scss">
  .ifBlank{
    width: 100vw;
    height:91.5vh;
    padding-top: 20vh;
    background: #fff;
    div{
      width: 30vw;
      height: auto;
      margin: 0px auto;
    }
    img{
      width: 30vw;
      height: 30vw;
      margin: 0px auto;
    }
    p{
      width: 100%;
      color: #666;
      text-align: center;
      font-size:15px;
      white-space:nowrap;
    }
  }
  .contents{
    width: 100vw;
    height: auto;
    background: #fff;
    padding-top: 4vw;
    border-bottom: 3vw solid #f5f5f5;
    .order{
      border-bottom: 6px solid #f5f5f5;
    }
    .btn{
      float: right;
      .nOrder{
        border: 1px solid #666;
        color: #666;
      }
      .pay{
        border: 1px solid #ff4c50;
        color: #ff4c50;
      }
      button{
        width:18.67vw;
        height:5vw;
        line-height:5vw;
        text-align:center;
        background:#fff;
        border-radius:4vw;
        margin-right:4vw;
        padding:0;
        font-size:13px;
        display:inline-block;
        margin-top:0vw;
        position:relative;
        top:1.2vw;
      }
    }
    .sec{
      width: 100vw;
      line-height:6.67vw;
      height: 27vw;
      border-bottom: 1px solid #f5f5f5;
      .text{
        float: right;
        padding-top: 3vw;
        width: 73vw;
        .seven{
          width: 32vw;
          height: 4.34vw;
          color: #ff4c50;
          border: 1px solid #ff4c50;
          border-radius: 4vw;
          line-height: 4vw;
          text-align: center;
          margin-top: 4vw;
          font-size: 11px;
        }
        p{
          height: 5vw;
          .types{
            float: right;
            color: #FF4C50;
            font-size: 13px;
            margin-right: 4vw;
          }
        }
        .size{
          font-size: 12px;
          color: #666;
        }
        .name{
          font-size: 13px;
          color: #333;

          .goodsName{
            width: 41vw;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
          }
        }
      }
      img{
        width: 20vw;
        height: 20vw;
        float: left;
        margin-left: 4vw;
        margin-top: 2.67vw;
        border-radius: 3px;
      }
    }
  }
</style>
<style>
  .van-tabs__content{
    margin-top: 3vw !important;
  }
</style>
